<template>
  <div class="test">
    <div class="testTop">行为决策实验平台</div>
    <div class="testMain">
      <div class="mainPic">
        <img src="@/assets/testPic.png" alt="" />
      </div>
      <div class="mainWord">
        <p class="one">感谢您参与我们的行为决策实验！</p>
        <p class="two">请您等候实验员的指令再点击下方按钮进入实验。</p>
      </div>
      <div class="mainBtn">
        <el-button type="primary" round @click="enterBtn()"   >进入实验</el-button>
<!--        <a-button type="primary"  @click="enterBtn()" shape="round">进入实验</a-button>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line
  name: 'Welcome',

  data() {
    return {}
  },

  mounted() {
     // 在vuex中重置时间
  },

  methods: {
    enterBtn() {
      this.$store.commit("getTime")
      this.$router.push({ name: 'Countdown' })
    }
  }
}
</script>

<style lang="scss" scoped>
.test {
  height: 100%;
  width: 100%;

  .testTop {
    height: 10%;
    font-size: 58px;
    letter-spacing: 0.5em;
    font-weight: 700;
    color: aliceblue;
    background-color: #0b45b0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .testMain {
    //height: 90%;
    .mainPic {
      display: flex;
      width: 100%;
      height: 70%;
      justify-content: center;
      align-items: center;
      padding: 1em;
    }
    .mainWord {
      width: 100%;
      //position: absolute;
      bottom: 13%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 38px;
      font-weight: 500;
      padding: 1em;
      .one {
        padding: 0;
        margin: 0;
      }
      .two {
        padding: 0;
        margin: 0;
      }
    }
    .mainBtn {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1em;
      .el-button {
        height: 60%;
      }
      .el-button--primary {
        width: 15%;
        background-color: #165dff;
        border-radius: 10px;
        font-size: 26px;
        font-weight: 600;
      }
    }
  }
}
</style>